<script setup lang="ts">
import type { Oauth2ThirdClientQo } from '#/oauth/thirdClient'
import {
  createOauth2ThirdClientApi,
  getOauth2ThirdClientDetailsApi,
  updateOauth2ThirdClientApi,
} from '@/api/oauth/thirdClient'

interface OnCloseResolveType extends CloseResolveType {}
let onCloseResolve = function (_value: OnCloseResolveType) { }

const dialogRef = $ref<DialogInstance>()
const ruleFormRef = ref<FormInstance>()
let dialogModal = $ref<Oauth2ThirdClientQo>({})
let dialogAction = $ref<DialogAction>('add')
let confirmLoading = $ref(false)
let dialogLoading = $ref(false)

const rules = reactive<FormRules<Oauth2ThirdClientQo>>({
  name: [
    { required: true, message: '请输入认证客户端名称', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入编码', trigger: 'blur' },
  ],
})
async function getDefaultModel() {
  return {

  } as Oauth2ThirdClientQo
}
// 打开
async function showDialog(args: {
  title: string
  action?: DialogAction
  model: {
    id?: string
  }
}) {
  const dialogRes = dialogRef!.openDialog<OnCloseResolveType>({
    title: args.title,
  })

  ruleFormRef.value?.clearValidate()
  onCloseResolve = dialogRes.onCloseResolve

  dialogAction = args.action ?? 'add'

  if (args.model.id) {
    dialogModal.id = args.model.id
  }

  if (args.action === 'add') {
    const defaultModel = await getDefaultModel()
    dialogModal = {
      ...defaultModel,
      ...args.model,
    }
  }
  else if (args.action === 'edit' || args.action === 'views') {
    await reflash()
  }

  return await dialogRes.dialogPrm
}

async function reflash() {
  if (!dialogModal.id)
    return
  dialogLoading = true
  const res = await getOauth2ThirdClientDetailsApi(dialogModal.id)
  if (!res)
    return
  dialogLoading = false
  Object.assign(dialogModal, res.data)
}

// 确认
async function confirm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate(async (valid) => {
    if (!valid) {
      return
    }
    confirmLoading = true
    if (dialogAction === 'add') {
      await createOauth2ThirdClientApi(dialogModal).finally(() => {
        confirmLoading = false
      })
    }
    else if (dialogAction === 'edit') {
      await updateOauth2ThirdClientApi(dialogModal).finally(() => {
        confirmLoading = false
      })
    }
    confirmLoading = false
    Message({
      type: 'success',
      message: `${DialogActionMap[dialogAction as DialogAction]}成功`,
    })
    onCloseResolve({ type: true })
  })
}

// 取消
function cancel() {
  ruleFormRef.value?.clearValidate()
  onCloseResolve({ type: false })
}

defineExpose({ showDialog })
</script>

<template>
  <sy-dialog
    ref="dialogRef"
    :before-close="cancel"
    :hide-confirm="dialogAction === 'views'"
    :confirm-loading="confirmLoading"
    :disabled-confirm="dialogLoading"
    @confirm="confirm(ruleFormRef)"
  >
    <el-form
      ref="ruleFormRef"
      v-loading="dialogLoading"
      :model="dialogModal"
      :rules="rules"
      label-width="auto"
      status-icon
    >
      <el-form-item label="客户端Logo" prop="logo">
        <sy-upload-picker
          v-model="dialogModal.logo"
          :limit="1"
          :public="false"
        />
      </el-form-item>
      <el-form-item label="客户端类型" prop="code">
        <sy-dict
          v-model="dialogModal.code"
          dict-type="oauth_client_type"
          placeholder="请选择客户端类型"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="客户端名称" prop="name">
        <el-input
          v-model="dialogModal.name"
          placeholder="请输入客户端名称"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="客户端Id" prop="clientId">
        <el-input
          v-model="dialogModal.clientId"
          placeholder="请输入客户端Id"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="客户端密钥" prop="clientSecret">
        <el-input
          v-model="dialogModal.clientSecret"
          placeholder="请输入客户端密钥"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="scope" prop="scope">
        <el-select
          v-model="dialogModal.scope"
          multiple
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          placeholder="请输入 scope"
        >
          <el-option
            v-for="item in dialogModal.scope"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="PC端回调地址" prop="pcRedirectUrl">
        <el-input
          v-model="dialogModal.pcRedirectUrl"
          placeholder="请输入PC端回调地址"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="App端回调地址" prop="appRedirectUrl">
        <el-input
          v-model="dialogModal.appRedirectUrl"
          placeholder="请输入PC端回调地址"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="获取用户信息地址" prop="userInfoUri">
        <el-input
          v-model="dialogModal.userInfoUri"
          placeholder="请输入获取用户信息地址"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="获取token地址" prop="tokenUri">
        <el-input
          v-model="dialogModal.tokenUri"
          placeholder="请输入获取token地址"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="授权申请的地址" prop="authorizationUri">
        <el-input
          v-model="dialogModal.authorizationUri"
          placeholder="请输入授权申请的地址"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
    </el-form>
  </sy-dialog>
</template>

<style scoped></style>
